<template>
  <div class="qa-management">
    <el-card class="qa-list-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <!-- 搜索输入框 -->
            <el-input v-model="searchKeyword" placeholder="搜索问题或答案" style="width: 250px; margin-right: 10px;"
              clearable @input="handleSearch" @clear="handleSearch">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>

            <!-- 重置按钮 -->
            <el-button @click="resetFilters" type="default">
              <el-icon>
                <Refresh />
              </el-icon>
              重置
            </el-button>
          </div>
          <div class="header-right">
            <!-- 这里可以添加右侧的按钮，比如添加问答等 -->
          </div>
        </div>
      </template>

      <!-- 问答列表表格 -->
      <el-table :data="getFilteredQAs()" style="width: 100%" v-loading="loading" element-loading-text="加载中..." empty-text="暂无数据" table-layout="fixed" :max-height="500">
        <!-- 会话列 -->
         <el-table-column prop="sessionTitle" label="会话" min-width="50" align="center" header-align="center">
           <template #default="{ row }">
             <div class="question-content">
               <span class="singleline-text">{{ row.sessionTitle }}</span>
             </div>
           </template>
         </el-table-column>
                           <!-- 问题列 -->
          <el-table-column prop="question" label="问题" min-width="100" align="center" header-align="center">
            <template #default="{ row }">
              <div class="question-content">
                <span class="singleline-text">{{ row.conversationQuestion || row.question || '暂无问题' }}</span>
              </div>
            </template>
          </el-table-column>

                   <!-- 答案列 -->
          <el-table-column prop="answer" label="答案" min-width="100" align="center" header-align="center">
            <template #default="{ row }">
              <div class="answer-content">
                <div class="answer-text-full">{{ row.conversationAnswer || row.answer || '暂无答案' }}</div>
              </div>
            </template>
          </el-table-column>
     
        <!-- 创建时间列 -->
         <el-table-column prop="createdAt" label="创建时间" width="160" align="center" header-align="center">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
         <!-- 操作列 -->
         <el-table-column label="操作" width="240" fixed="right" align="center" header-align="center">
          <template #default="{ row }">
            <div class="operation-buttons">
              <!-- 查看详情按钮 -->
              <el-button type="text" size="small" @click="viewQA(row)">
                <el-icon>
                  <View />
                </el-icon>
                查看
              </el-button>
              <!-- 删除按钮 -->
              <el-button type="text" size="small" @click="deleteQAHandler(row)" style="color: #f56c6c;">
                <el-icon>
                  <Delete />
                </el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>




    <!-- 问答详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="问答详情" width="800px">
      <div class="qa-detail">
        <div class="detail-header">
          <h3>问题详情</h3>
        </div>
        <el-divider />
        
        


        <div class="detail-content">
          <div class="detail-item">
            <label>会话:</label>
            <div class="question-detail">{{ selectedQADetail.sessionTitle }}</div>
          </div>
          <div class="detail-item">
            <label>问题:</label>
            <div class="question-detail">{{ selectedQADetail.conversationQuestion }}</div>
          </div>
          <div class="detail-item">
            <label>答案:</label>
            <div class="answer-detail">{{ selectedQADetail.answer }}</div>
          </div>
       
          <div class="detail-item">
            <label>创建时间:</label>
            <span>{{ formatDate(selectedQADetail.createdAt) }}</span>
          </div>
        </div>
        
        <!-- 知识库详情部分 -->
        <div v-if="selectedQADetail.knowledgeBaseId" class="knowledge-base-detail">
          <el-divider />
          <div class="detail-header">
            <h3>知识库详情</h3>
            <el-icon v-if="loadingKnowledgeBase" class="loading-icon">
              <Loading />
            </el-icon>
          </div>
          <div v-if="loadingKnowledgeBase" class="loading-content">
            <el-skeleton :rows="3" animated />
          </div>
          <div v-else-if="selectedKnowledgeBaseDetail.id" class="kb-detail-content">
            <div class="detail-item">
              <label>知识库名称:</label>
              <span>{{ selectedKnowledgeBaseDetail.knowledgeBaseName }}</span>
            </div>
            <div class="detail-item">
              <label>描述:</label>
              <div class="kb-description">{{ selectedKnowledgeBaseDetail.description || '暂无描述' }}</div>
            </div>
            <div class="detail-item">
              <label>创建时间:</label>
              <span>{{ formatDate(selectedKnowledgeBaseDetail.createdAt) }}</span>
            </div>
            <div class="detail-item">
              <label>文档数量:</label>
              <span>{{ selectedKnowledgeBaseDetail.documentCount || 0 }} 个</span>
            </div>
            <div class="detail-item">
              <label>状态:</label>
              <el-tag :type="selectedKnowledgeBaseDetail.status === 'active' ? 'success' : 'warning'">
                {{ selectedKnowledgeBaseDetail.status === 'active' ? '活跃' : '非活跃' }}
              </el-tag>
            </div>
          </div>
          <div v-else class="no-kb-detail">
            <el-empty description="无法获取知识库详情" />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Search, View, Edit, Delete, Message, Document, Check, Close, Refresh, Loading, QuestionFilled, ChatDotRound, Clock
} from '@element-plus/icons-vue'
import {
  getQAList,
  createQA,
  updateQA,
  deleteQA,
  getQADetail
} from '@/api/qa'
import {
  getKnowledgeBaseDetail
} from '@/api/knowledgeBase'

// ==================== 响应式数据定义 ====================
const loading = ref(false)
const addingQA = ref(false)
const updatingQA = ref(false)
const showAddDialog = ref(false)
const showEditDialog = ref(false)
const showDetailDialog = ref(false)
const qaList = ref([])
const knowledgeBases = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const searchKeyword = ref('')
const knowledgeBaseFilter = ref('')
const qaFormRef = ref(null)
const editQAFormRef = ref(null)
const qaForm = ref({
  question: '',
  knowledgeBaseId: '',
  answer: ''
})

let formPage=ref({
  page:1,
  size:10,
  search:''
})
const selectedQADetail = ref({})
const selectedKnowledgeBaseDetail = ref({})
const loadingKnowledgeBase = ref(false)
let searchTimer = null

// ==================== 表单验证规则 ====================
const qaRules = {
  question: [
    { required: true, message: '请输入问题', trigger: 'blur' },
    { min: 5, max: 500, message: '问题长度在 5 到 500 个字符', trigger: 'blur' }
  ],
  knowledgeBaseId: [
    { required: true, message: '请选择知识库', trigger: 'change' }
  ],
  answer: [
    { required: true, message: '请输入答案', trigger: 'blur' },
    { min: 10, max: 2000, message: '答案长度在 10 到 2000 个字符', trigger: 'blur' }
  ]
}

// ==================== 工具函数 ====================
const formatDate = (dateStr) => {
  if (!dateStr) return '未知时间'
  
  try {
    // 处理不同的日期格式
    let date
    if (typeof dateStr === 'string') {
      // 如果是ISO格式的字符串，直接创建Date对象
      if (dateStr.includes('T') || dateStr.includes('Z')) {
        date = new Date(dateStr)
      } else {
        // 处理其他格式的日期字符串
        date = new Date(dateStr.replace(/-/g, '/'))
      }
    } else if (dateStr instanceof Date) {
      date = dateStr
    } else {
      date = new Date(dateStr)
    }
    
    // 检查日期是否有效
    if (isNaN(date.getTime())) {
      return '未知时间'
    }
    
    // 格式化为中文日期时间
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (e) {
    console.error('日期格式化错误:', e, '原始值:', dateStr)
    return '未知时间'
  }
}

// ==================== 数据加载函数 ====================
const loadQAs = async () => {
  loading.value = true

  try {
    // 构建搜索参数
    const response = await getQAList(formPage.value)
    console.log(formPage.value);
    
    console.log(response);
    
    // 检查响应结构
    if (response) {
      // 常见分页结构兼容
      const data = response.data || response
      const list = data.records || data.list || data.rows || data.qaList || data.content || data.items || []
      const totalCount = data.total || data.totalElements || data.totalCount || data.count || 0
      qaList.value = Array.isArray(list) ? list : []
      total.value = Number(totalCount) || qaList.value.length
    }
    
  } catch (error) {
    console.error('加载问答列表失败:', error)
    console.error('错误详情:', error.response?.data)
    
    // 清空数据并显示错误信息
    qaList.value = []
    total.value = 0
    ElMessage.error('加载问答列表失败，请检查网络连接或联系管理员')
  }
  
  loading.value = false
}

const loadKnowledgeBases = async () => {
  try {
    // 这里需要调用知识库API
    // const res = await getKnowledgeBaseList()
    
    // 模拟数据
    const mockData = [
      { id: '1', knowledgeBaseName: '技术文档库' },
      { id: '2', knowledgeBaseName: '产品手册库' }
    ]
    
    knowledgeBases.value = mockData
  } catch (error) {
    console.error('加载知识库列表失败:', error)
    knowledgeBases.value = []
  }
}

// ==================== 搜索和过滤功能 ====================
const handleSearch = () => {
  console.log(searchKeyword.value);
  formPage.value.search=searchKeyword.value
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
  loadQAs()
  searchTimer = setTimeout(() => {
    // 搜索时重置到第一页
    currentPage.value = 1
    loadQAs()
  }, 300)
}

const resetFilters = () => {
  searchKeyword.value = ''
  knowledgeBaseFilter.value = ''
  // 重置时也重置到第一页
  currentPage.value = 1
  loadQAs()
}

// 列表数据直接使用服务端分页后的结果
const getFilteredQAs = () => qaList.value

// ==================== 事件处理函数 ====================
const viewQA = async (qa) => {
  try {
    // 获取问答详情
    const qaRes = await getQADetail(qa.id)
    selectedQADetail.value = qaRes.data
    
    // 如果有关联的知识库，获取知识库详情
    if (qaRes.data.knowledgeBaseId) {
      loadingKnowledgeBase.value = true
      try {
        const kbRes = await getKnowledgeBaseDetail(qaRes.data.knowledgeBaseId)
        selectedKnowledgeBaseDetail.value = kbRes.data
      } catch (kbError) {
        console.error('获取知识库详情失败:', kbError)
        selectedKnowledgeBaseDetail.value = {}
      } finally {
        loadingKnowledgeBase.value = false
      }
    } else {
      selectedKnowledgeBaseDetail.value = {}
    }
    
    showDetailDialog.value = true
  } catch (e) {
    console.error('获取问答详情失败:', e)
    selectedQADetail.value = { ...qa }
    selectedKnowledgeBaseDetail.value = {}
    showDetailDialog.value = true
  }
}



const deleteQAHandler = async (qa) => {
  try {
    // 调试：打印完整的数据结构
    console.log('删除问答数据:', qa)
    
    // 获取问题内容，兼容不同的字段名
    const questionText = qa.conversationQuestion || qa.question || '未知问题'
    console.log('提取的问题文本:', questionText)
    
    // 确认删除
    await ElMessageBox.confirm(
      `确定要删除这个问答记录吗？\n问题：${questionText.substring(0, 50)}${questionText.length > 50 ? '...' : ''}`,
      '确认删除',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false
      }
    )

    console.log('删除问答ID:', qa.id)
    
    const res = await deleteQA(qa.id)
    console.log('删除结果:', res)
    
    if (res.code === 200) {
      ElMessage.success('删除成功')
      // 重新加载问答列表
      loadQAs()
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch (error) {
    if (error === 'cancel') {
      return // 用户取消删除
    }
    
    console.error('删除问答失败:', error)
    if (error.response?.data?.message) {
      ElMessage.error(`删除失败: ${error.response.data.message}`)
    } else {
      ElMessage.error('删除失败，请稍后重试')
    }
  }
}


const handleSizeChange = (newSize) => {
 formPage.value.size=newSize

  loadQAs()
}

const handleCurrentChange = (newPage) => {
 formPage.value.page=newPage

  
  loadQAs()
}

onMounted(() => {
  loadKnowledgeBases()
  loadQAs()
})

onUnmounted(() => {
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
})
</script>

<style scoped>
/* 问答管理页面整体样式 */
.qa-management {
  padding: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: calc(100vh - 120px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* 让内部内容整体水平居中 */
}

/* 主卡片容器 */
.qa-list-card {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
}

.qa-list-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.header-left {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-left .el-input {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.header-left .el-input:focus-within {
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.header-left .el-select {
  border-radius: 12px;
}

.header-left .el-button {
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.header-left .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 表格样式美化 */
:deep(.el-table) {
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

:deep(.el-table__header) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

:deep(.el-table th) {
  background: transparent !important;
  border-bottom: 2px solid #e2e8f0;
  font-weight: 600;
  color: #374151;
  padding: 16px 12px;
  font-size: 14px;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f1f5f9;
  padding: 16px 12px;
  transition: all 0.3s ease;
}

:deep(.el-table tr:hover td) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  transform: scale(1.01);
}

/* 表格行交替背景 */
:deep(.el-table tr:nth-child(even)) {
  background: rgba(248, 250, 252, 0.5);
}

:deep(.el-table tr:nth-child(even):hover) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* 答案列特殊样式 */
:deep(.el-table .el-table__cell:nth-child(3) .cell) {
  white-space: normal !important;
  line-height: 1.6 !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  padding: 8px 0 !important;
  background: rgba(248, 250, 252, 0.3);
  border-radius: 8px;
  padding: 12px !important;
  margin: 4px 0;
}

/* 答案文本完整显示样式 */
.answer-text-full {
  display: block;
  width: 100%;
  line-height: 1.6;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  max-height: none;
  overflow: visible;
  text-overflow: clip;
  padding: 0;
  color: #374151;
  font-size: 14px;
  background: transparent;
}

/* 答案列容器：限制行高并提供内部滚动条 */
.answer-content {
  width: 100%;
  max-height: 240px; /* 行高上限，可按需调整 */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px; /* 给滚动条留空间，避免遮住文字 */
  box-sizing: border-box;
}

.answer-content::-webkit-scrollbar {
  width: 6px;
}

.answer-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.answer-content::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.6);
  border-radius: 3px;
}

/* 其他列文本样式 */
.singleline-text {
  display: inline-block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal; /* 允许自动换行，避免遮挡 */
  vertical-align: middle;
  color: #374151;
  font-weight: 500;
}

/* 操作按钮样式美化 */
.operation-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap; /* 防止按钮换行被截断 */
  justify-content: center;
  min-width: 100px;
}

.operation-buttons .el-button {
  padding: 6px 12px;
  font-size: 12px;
  min-width: auto;
  white-space: nowrap;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.operation-buttons .el-button:first-child {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.operation-buttons .el-button:first-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.operation-buttons .el-button:last-child {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  color: white;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  opacity: 1;
  font-weight: 600;
}

.operation-buttons .el-button:last-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  opacity: 1;
}

.operation-buttons .el-button .el-icon {
  margin-right: 4px;
  font-size: 12px;
}

.operation-buttons .el-button:last-child .el-icon {
  color: white;
  opacity: 1;
}

/* 分页容器美化 */
.pagination-container {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 让表格在列总宽度不足时可横向滚动，避免遮挡 */
.qa-list-card :deep(.el-table__body-wrapper) {
  overflow-x: auto !important;
}

/* 表格列默认换行，完整展示内容，且整表内容水平+垂直居中 */
:deep(.el-table .cell) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 答案列换行显示完整内容 */
:deep(.el-table .el-table__cell:nth-child(3) .cell) {
  white-space: normal !important;
}

/* 操作列不换行，留出空间避免遮挡 */
:deep(.el-table .el-table__cell:nth-child(5) .cell) {
  flex-wrap: nowrap !important;
}

/* 调整表格容器宽度，保持居中且不挤压 */
.qa-list-card {
  width: 100%;
  max-width: 1200px; /* 稍微收窄，避免过宽导致分页被挤压 */
  margin: 0 auto 16px auto; /* 与分页保持间距 */
}

/* 允许表头列根据内容最小宽度展示 */
:deep(.el-table th .cell) {
  white-space: nowrap;
}

/* 加载状态美化 */
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

:deep(.el-loading-spinner .el-loading-text) {
  color: #667eea;
  font-weight: 500;
}

/* 空状态美化 */
:deep(.el-table__empty-block) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  margin: 20px;
}

:deep(.el-table__empty-text) {
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qa-list-card {
  animation: fadeInUp 0.6s ease-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .qa-management {
    padding: 16px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  
  .header-left {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .header-left .el-input,
  .header-left .el-select {
    width: 100%;
  }
  
  .operation-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .operation-buttons .el-button {
    width: 100%;
  }
}

/* 对话框样式美化 */
:deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 32px;
  border-bottom: none;
}

:deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

:deep(.el-dialog__body) {
  padding: 32px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

:deep(.el-dialog__footer) {
  padding: 20px 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.8);
}

/* 问答详情样式 */
.qa-detail {
  padding: 0;
}

.detail-header {
  margin-bottom: 24px;
}

.detail-header h3 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.detail-content {
  margin-top: 24px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.detail-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.detail-item label {
  width: 120px;
  font-weight: 600;
  color: #374151;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.detail-item span {
  color: #374151;
  font-weight: 500;
}

.question-detail, .answer-detail {
  color: #374151;
  line-height: 1.6;
  white-space: pre-wrap;
  background: rgba(248, 250, 252, 0.5);
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  flex: 1;
}

.knowledge-base-detail {
  margin-top: 32px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.knowledge-base-detail .detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.loading-icon {
  animation: rotate 1s linear infinite;
  color: #667eea;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-content {
  padding: 24px 0;
}

.kb-detail-content {
  margin-top: 24px;
}

.kb-description {
  color: #64748b;
  line-height: 1.6;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 16px;
  border-radius: 12px;
  border-left: 4px solid #667eea;
  font-style: italic;
}

.no-kb-detail {
  padding: 40px 0;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.dialog-footer .el-button {
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.dialog-footer .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 全局居中样式 */
:deep(.el-table th) {
  text-align: center !important;
}

:deep(.el-table td .cell) {
  text-align: center !important;
}

/* 垂直方向也居中 */
:deep(.el-table td),
:deep(.el-table th) {
  vertical-align: middle !important;
}

/* 答案列中的文本容器也居中 */
.answer-content,
.answer-text-full {
  text-align: center !important;
}
</style>
